import Vue from 'vue'

// 1.1 导入路由的包
import VueRouter from 'vue-router'
// 1.2 安装路由
Vue.use(VueRouter)

// 每次刚进入 网站, 肯定会 调用 main.js 在刚调用的时候, 先从本地存储中,把 购物车的数据读出来
// 放到 store中
var car = JSON.parse(localStorage.getItem('car') || '[]')

// 注册 vuex
import Vuex from 'vuex'
Vue.use(Vuex)
var store = new Vuex.Store({
	state:{ // this.$store.state.****
		car: car, //将购物车中的商品的数据,用一个数组存储起来, 在 car 数组中 存储一些 商品的对象
		// carnum: 0,
	},
	mutations:{ // this.$store.commit('方法名称', '按需传唯一的参')
		addToCar(state, goodsinfo){
			// 点击加入购物车,把商品信息,保存到 store 中的 car 上
			// 分析:
			// 1. 如果购物车中,之前就已经有这个对应的商品了,只需要更新数量
			// 2. 如果没有, 则直接把 商品数据, push 到 car 中即可
			var flag = false;

			state.car.some(item => {
				if(item.id == goodsinfo.id) {
					item.count += parseInt(goodsinfo.count);
					flag = !flag;

					// state.carnum = 0;

					// state.car.forEach(function(e){
					// 	state.carnum += e.count;
					// })

					return true;
				}
			})

			if(!flag) {
				state.car.push(goodsinfo);

				// state.carnum = 0;

				// state.car.forEach(function(e){
				// 	state.carnum += e.count;
				// })
				// console.log(state.carnum);
			}
			// 当 更新 car 之后, 把 car 数组,存储到本地的 localStorage 中
			localStorage.setItem('car',JSON.stringify(state.car)) 
		},
		updateGoodsInfo(state, goodsinfo) {
			// 修改购物车中商品数量值
		
			state.car.some(item => {
				if( item.id == goodsinfo.id ){
					item.count = parseInt(goodsinfo.count);
					return true;
				}
			})

			localStorage.setItem('car',JSON.stringify(state.car)) 

		},
		removeCar(state, id) {

			state.car.some(( item, i )=> {

				if ( item.id == id ) {
					state.car.splice( i, 1 );
					return true;
				}
			})

			localStorage.setItem('car',JSON.stringify(state.car)) 
		},
		updateSelected(state, info) {

			state.car.some (item => {

				if( item.id == info.id) {
					item.selected = info.selected;
					return true;
				}

			})
			localStorage.setItem('car',JSON.stringify(state.car)) 
		}

	},
	getters:{ // this.$store.getters.***
		// 相当于 计算属性, 也相当于 filters
		getAllCount(state) {
			var c = 0;
			state.car.forEach(item=>{
				c += item.count
			});
			return c;
		},

		getGoodsCount(state){
			var o = {};

			state.car.forEach(item => {
				o[item.id] = item.count;
			});

			return o;

			console.log(o);
			
		},

		getGoodsSelected(state) {
			var o = {};

			state.car.forEach(item => {
				o[item.id] = item.selected
			})

			return o;
		},

		getGoodsCountAndAmout(state) {
			var o = {
				count: 0,	//数量
				amount: 0	//总价
			};

			state.car.forEach(item => {
				if(item.selected){
					o.count += item.count;
					o.amount += item.count * item.price
				}
			});

			// console.log(state.car);
			

			return o;
		}
	}
})

// 2.1 导入 vue-resource
import VueResource from 'vue-resource'
// 2.2 安装 vue-resource
Vue.use(VueResource)

// 导入 MUI 的样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'

// 按需导入 Mint-UI 中的组件
import { Header, Swipe, SwipeItem, Button, Switch } from 'mint-ui'
Vue.component(Header.name, Header)
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
Vue.component(Button.name, Button)
Vue.component(Switch.name, Switch)

// 1.3 导入自己的 router.js 路由模块
import router from './router.js'

// 导入 App 跟组件
import app from './app.vue'

var vm = new Vue({
	el: '#app',
	render: c => c(app),
	router, // 1.4 挂载路由对象到 VM 实例上
	store
})